<template>
<div class="mainBox">
    <div style="height:40px;">
        <el-col :span="2" :offset="22" style="height:40px;">
            <el-button type="primary" @click="send">发送</el-button>
        </el-col>
    </div>
    <div style="height:30px;"></div>
    <div class="fanKuiBox">
            <el-input
                type="textarea"
                :rows="12"
                placeholder="说点什么吧......"
                v-model="textarea"
            >
            </el-input>
            <el-row style="margin-top:30px;"> 
                <el-col class="juZhong">
                    <el-upload
                        class="message"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :http-request="handleMessageSuccess"
                        :show-file-list="false"
                        
                        >
                        <img v-if="imageUrl" :src="imageUrl" class="message">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-col>
            </el-row>
    </div>
</div>    
</template>

<script>
export default {
     data(){
        return{
            textarea:'',
            imageUrl: '',
            file:'',
            fileList:[],

        }
    },
     methods: {
        handleMessageSuccess(file){
            const isJPG = file.file.type === 'image/jpeg';
            const isGIF = file.file.type === 'image/gif';
            const isPNG = file.file.type === 'image/png';
            const isBMP = file.file.type === 'image/bmp';
            const isLt4M = file.file.size / 1024 / 1024 < 4;
            const isBig = file.file.size / 1024 / 1024 > 1;
            if (!isJPG && !isGIF && !isPNG && !isBMP) {
                this.$message.error('上传图片只能是jpg/png/gif/bmp格式!');
            }else{
                if (!isLt4M) {
                    this.$message.error('上传图片大小不能超过 4MB!');
                }else{
                    if(isBig){
                        this.$message.error('上传图片过大请耐心等待！');
                        console.log(file);
                        this.imageUrl = URL.createObjectURL(file.file);
                        this.file=file.file;
                        this.fileList.push(this.file);
                    }else{
                        console.log(file);
                        this.imageUrl = URL.createObjectURL(file.file);
                        this.file=file.file;
                        this.fileList.push(this.file);
                    }
                }
            }
        },
        send(){
            if(this.textarea!=''){
                const formData = new FormData();
                formData.append("opinionText", this.textarea);
                formData.append('opinionPicture', this.fileList);
                var URL='http://47.101.180.43:8075/system/publishOpinion';
                console.log(formData);
                this.$ajax({
                        method:'put',
                        url:URL,
                        data:formData,
                    }).then(response =>{
                        if(response.data.code==0){
                            this.$notify({
                                message: response.data.data,
                                type: 'success'
                            });
                            this.fileList=[];
                            this.imageUrl='';
                            this.textarea='';
                        }else{
                            console.log(response.data.msg); 
                                this.$notify({
                                    message: response.data.msg,
                                });
                        }
                    }).catch(error => {
                    console.log('反馈失败');
                    });
            }else{
                this.$notify({
                    message: '请填写反馈信息！',
                });
            }
        },
        // handleAvatarSuccess(res, file) {
        //     this.imageUrl = URL.createObjectURL(file.raw);
        //     this.file=file.raw;
        //     console.log(this.file);
        //     this.fileList.push(this.file);
        // },
    }
}
</script>

<style>
.juZhong{
    display:flex;
    align-items:center;
    justify-content:center
}
.message {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 90px;
    height: 90px;
    line-height: 90px;
  }
  .avatar-uploader-icon {
    font-size: 18px;
    color: #8c939d;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
  }
.fanKuiBox{
    left: 50%;
    margin-left: -300px;
    width:600px;
    height:560px;
    /* background-color: #4A4C5B; */
    position: absolute;
}
.mainBox{
    position: relative;
    min-height: 700px;
	background-color: #FFFFFF;
	margin-top: 20px;
	padding: 20px;
	border-radius: 10px;
}
</style>